import { useState } from 'react'
import { Button } from 'antd';
import ToDoItem from './components/ToDoItem';
import ToDoContainer from './components/ToDoContainer'
import TodoFilter from './components/TodoFilter'
import { STATUS } from './config/status';

function App () {
  const [todos, setTodos] = useState([])
  const [filterStatus, setFilterStatus] = useState(`${STATUS.IS_CREATE},${STATUS.IS_DONE}`)
  const handleSubmit = (todoItem) => {
    setTodos([//更新值
      ...todos,
      todoItem
    ])
  }
  // 触发删除或完成事件,todoItem修改的数据filter把已有并匹配不上的给删除,赋值新的数据
  const handleOperate = (todoItem) => {
    console.log('触发删除或完成事件', todoItem);
    const newTodos = todos.filter(todo => todo.id !== todoItem.id)
    newTodos.push(todoItem)
    setTodos(newTodos)
  }
  // 过滤筛选状态
  const handleStatusChange = (status) => {
    console.log('过滤筛选状态', status);
    // 修改状态
    setFilterStatus(status)

  }
  return (
    <div className="todo-app">
      <h2 className='todo-title'>待办清单</h2>
      <ToDoItem onSubmit={handleSubmit} />
      <TodoFilter filterStatus={filterStatus} onFilterStatus={handleStatusChange} />
      <ToDoContainer filterStatus={filterStatus} todos={todos} onOperate={handleOperate} />
    </div>
  )
}

export default App
